<template>
  <div class="bg-animate">
    <div class="u-audio-wave">
      <div class="loder-container">
        <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" class="loader"><circle cx="60" cy="60" r="40" class="internal-circle"></circle><circle cx="60" cy="60" r="50" class="external-circle"></circle></svg>
        <img :src="getAssetsImages('logo.png')" class="logo">
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { unref } from 'vue'
import { useRouter } from 'vue-router'
import { getAssetsImages } from '@/utils';
import { getGameLink } from '@/api/game';

const { currentRoute, replace } = useRouter()

const { params, query } = unref(currentRoute)

const fetchGameLink = (params: any) => {
  getGameLink(params).then((data: string) => {
    if (data && typeof data == "string") {
      window.location.href = data;
    }
  }).catch((err: any) => {
    console.log(err)
  })
}
onBeforeMount(() => {
  const gameId = Number(query.game_type_id);
  if (gameId > 0) {
    fetchGameLink(query)
  }
})
// Reflect.deleteProperty(params, '_redirect_type')
// Reflect.deleteProperty(params, 'path')

// const _path = Array.isArray(path) ? path.join('/') : path

// if (_redirect_type === 'name') {
//   replace({
//     name: _path,
//     query,
//     params
//   })
// } else {
//   replace({
//     path: _path.startsWith('/') ? _path : '/' + _path,
//     query
//   })
// }
</script>
<style lang="less" scoped>
.m-main-pay-page {
    color: #fff
}

.m-main-pay-page .qrcode {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 100;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-top: 5%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 1.2rem;
    padding: 5px;
    line-height: 1.5
}

.m-main-pay-page .qrcode .desc {
    max-width: 650px
}

.m-main-pay-page .qrcode img {
    width: 20rem;
    height: 20rem;
    margin-top: 10px
}

.m-main-pay-page .qrcode h3 {
    font-weight: bolder;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.m-main-pay-page .qrcode h3>* {
    word-break: break-word
}

.m-main-pay-page .qrcode h3 b {
    font-weight: bolder;
    color: #909399;
    word-break: break-all
}

.m-main-pay-page .qrcode h3 .identification_code,.m-main-pay-page .qrcode h3 .money {
    vertical-align: middle
}

.m-main-pay-page .qrcode h3 .money {
    color: #ff0
}

.m-main-pay-page .qrcode h3 .identification_code {
    color: #00ff7f
}

.m-main-pay-page .qrcode .notify_url {
    width: auto;
    line-height: 1;
    font-size: 1.5rem;
    margin-left: 0;
    padding: 1rem 3rem;
    color: #fff;
    background: #2772ee;
    outline: none;
    border: none;
    margin: .5rem;
    cursor: pointer
}

.m-main-pay-page .qrcode .notify_url:focus,.m-main-pay-page .qrcode .notify_url:hover {
    color: #fff;
    background: #1059d2
}

form {
    text-align: right;
    width: 410px;
    margin: 0 auto
}

input,select,textarea {
    width: 300px;
    height: 30px;
    margin: 10px 10px
}

textarea {
    height: 150px;
    vertical-align: middle
}

.u-audio-wave {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.u-audio-wave,.u-audio-wave .loder-container {
    position: relative;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.u-audio-wave .loder-container {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-bottom: 10rem;
    width: 120px;
    height: 120px
}

.u-audio-wave .loader {
    position: absolute;
    top: 0;
    height: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    stroke-linecap: round;
    stroke-width: 4;
    fill: none
}

.u-audio-wave .loader .external-circle,.u-audio-wave .loader .internal-circle {
    stroke: #fff;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    transform-origin: center
}

.u-audio-wave .loader .internal-circle {
    stroke-dasharray: 235;
    stroke-width: 3px;
    -webkit-animation: internal 1s ease-in-out infinite;
    animation: internal 1s ease-in-out infinite;
    opacity: .4
}

.u-audio-wave .loader .external-circle {
    stroke-dasharray: 312;
    -webkit-animation: external 1s linear infinite;
    animation: external 1s linear infinite;
    opacity: .9
}

.u-audio-wave .logo {
    width: 100%;
    max-height: 100%;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-animation: loading-text-opacity 1s ease-in-out infinite alternate;
    animation: loading-text-opacity 1s ease-in-out infinite alternate
}

@-webkit-keyframes loading-text-opacity {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes loading-text-opacity {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes internal {
    0% {
        stroke-dashoffset: 235
    }

    25% {
        stroke-dashoffset: 80
    }

    to {
        stroke-dashoffset: 235;
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes internal {
    0% {
        stroke-dashoffset: 235
    }

    25% {
        stroke-dashoffset: 80
    }

    to {
        stroke-dashoffset: 235;
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@-webkit-keyframes external {
    0% {
        stroke-dashoffset: 312;
        -webkit-transform: rotate(70deg);
        transform: rotate(70deg)
    }

    60% {
        stroke-dashoffset: -312
    }

    to {
        stroke-dashoffset: -312;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg)
    }
}

@keyframes external {
    0% {
        stroke-dashoffset: 312;
        -webkit-transform: rotate(70deg);
        transform: rotate(70deg)
    }

    60% {
        stroke-dashoffset: -312
    }

    to {
        stroke-dashoffset: -312;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg)
    }
}

html {
    color: #fff;
    font-size: 62.5%
}

body,html {
    height: 100%
}

@media only screen and (min-width: 481px) {
    html {
        font-size:94%!important
    }
}

@media only screen and (min-width: 900px) {
    html {
        font-size:125%!important
    }
}

#app {
    font-family: Avenir,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    background-color: #242427;
    width: 100%;
    height: 100%
}

* {
    margin: 0
}

ul {
    list-style-type: none;
    padding: 0
}

li {
    display: inline-block;
    margin: 0 10px
}

a {
    color: #42b983
}

.bg-animate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z' fill='%239C92AC' fill-opacity='.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    animation: bgcolors 15s linear infinite alternate;
    min-height: 100vh;
}

@-webkit-keyframes bgcolors {
    0% {
        background-color: #242427
    }

    25% {
        background-color: #10100f
    }

    50% {
        background-color: #090c30
    }

    75% {
        background-color: #10100f
    }

    to {
        background-color: #242427
    }
}

@keyframes bgcolors {
    0% {
        background-color: #242427
    }

    25% {
        background-color: #10100f
    }

    50% {
        background-color: #090c30
    }

    75% {
        background-color: #10100f
    }

    to {
        background-color: #242427
    }
}
</style>
